<template>
  <div class="main">
    <div class="title">
      <div class="titleBlock"></div>
      <div class="titleText">预约详情</div>
    </div>
    <div class="card1">
      <div class="card1Title">体检人信息</div>
      <div class="card1Section">
        <div class="form1">
          <el-form :model="form" label-width="120px">
            <el-form-item label="患者姓名">
              <el-input v-model="form.patients_name" disabled />
            </el-form-item>
            <el-form-item label="证件类型">
              <el-input v-model="form.document_type" disabled />
            </el-form-item>
            <el-form-item label="微信昵称">
              <el-input v-model="form.WeChat_nickname" disabled />
            </el-form-item>
            <el-form-item label="就诊人地址">
              <el-input v-model="form.patients_address" disabled />
            </el-form-item>
          </el-form>
        </div>
        <div class="form1">
          <el-form :model="form" label-width="120px">
            <el-form-item label="就诊卡号">
              <el-input v-model="form.card_number" disabled />
            </el-form-item>
            <el-form-item label="证件号码">
              <el-input v-model="form.patients_id_number" disabled />
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input v-model="form.patients_phone" disabled />
            </el-form-item>
          </el-form>
        </div>
        <div class="form1">
          <el-form :model="form" label-width="120px">
            <el-form-item label="患者头像">
              <el-image
                style="width: 80px; height: 80px"
                :src="form.patients_image"
                :fit="fit"
              />
            </el-form-item>
            <el-form-item label="关系">
              <el-input v-model="form.relationship" disabled />
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div class="card1">
      <div class="card1Title">预约信息</div>
      <div class="card1Section">
        <div class="form1">
          <el-form :model="form" label-width="120px">
            <el-form-item label="就诊医院">
              <el-input v-model="form.hospital_name" disabled />
            </el-form-item>
            <el-form-item label="体检时间">
              <el-input v-model="form.patients_TJDate" disabled />
            </el-form-item>
            <el-form-item label="体检费">
              <el-input v-model="form.packagePrice" disabled />
            </el-form-item>
            <el-form-item label="报告时间">
              <el-input v-model="form.report_time" disabled>
                <template #append>
                  <el-button
                    v-if="form.patients_status != 1"
                    class="btn"
                    @click="report"
                    >查看报告</el-button
                  >
                </template>
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="form1">
          <el-form :model="form" label-width="120px">
            <el-form-item label="医院地址">
              <el-input v-model="form.hospital_address" disabled />
            </el-form-item>
            <el-form-item label="候诊时间">
              <el-input v-model="form.waiting_time" disabled />
            </el-form-item>
            <el-form-item label="预约时间">
              <el-input v-model="form.patients_appointmentTime" disabled />
            </el-form-item>
          </el-form>
        </div>
        <div class="form1">
          <el-form :model="form" label-width="120px">
            <el-form-item label="报道科室">
              <el-input v-model="form.department_reported" disabled />
            </el-form-item>
            <el-form-item label="体检套餐">
              <el-input v-model="form.packageName" disabled />
            </el-form-item>
            <el-form-item label="状态">
              <el-input v-model="form.patients_status" disabled />
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="anNiu">
        <el-button @click="cancel" type="primary">返回</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { ref, reactive, toRefs, computed, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
export default {
  props: {},
  setup() {
    const data = reactive({
      form: {
        patients_name: "",
        document_type: "",
        WeChat_nickname: "",
        patients_address: "",
        card_number: "",
        patients_id_number: "",
        patients_phone: "",
        patients_image:
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        relationship: "",
        hospital_name: "",
        patients_TJDate: "",
        packagePrice: "",
        report_time: "",
        hospital_address: "",
        waiting_time: "",
        patients_appointmentTime: "",
        department_reported: "",
        packageName: "",
        patients_status: "",
      },
    });
    const router = useRouter();
    const route = useRoute();
    // console.log(route.params);
    data.form = route.params;
    const report = () => {
      router.push({ name: "reportDetails", params: { ...data.form } });
    };
    const cancel = () => {
      router.push({ path: "/home/bookedManage/appointmentExamination" });
    };
    return { ...toRefs(data), report, cancel };
  },
};
</script>
<style lang="scss" scoped>
.title {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 0 30px;
  box-sizing: border-box;
  .titleBlock {
    width: 50px;
    height: 13px;
    background-color: #006eff;
    border-radius: 20px;
  }
  .titleText {
    font-size: 30px;
    margin-left: 20px;
  }
}
.card1 {
  box-shadow: 1px 1px 5px 1px rgba(194, 188, 188, 0.486);
  width: 100%;
  margin-bottom: 30px;
  .card1Title {
    padding: 20px;
    box-sizing: border-box;
    color: #006eff;
    background-color: #f2f2f2;
  }
  .card1Section {
    width: 100%;
    background-color: white;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 40px 0;
    box-sizing: border-box;
    .form1 {
      width: 30%;
      // .el-input__wrapper {
      //   box-shadow: 0 0 0 0 gray;
      // }
      .btn {
        background-color: #006eff;
        color: white;
      }
    }
  }
  .anNiu {
    padding: 30px 80px 50px;
    box-sizing: border-box;
    background-color: white;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    .el-button {
      padding: 20px 30px;
      box-sizing: border-box;
      font-size: 20px;
    }
  }
}
</style>